<template>
  <div style="display:flex; align-items:center;">
    <em v-if="['微信', '微信视频号', '微信视频'].includes(data)" :style="{ 'marginLeft': marginLeft }" class="platform-icon weixin"/>
    <em v-else-if="data === '秒拍'" :style="{ 'marginLeft': marginLeft }" class="platform-icon miaopai"/>
    <em v-else-if="data === '美拍'" :style="{ 'marginLeft': marginLeft }" class="platform-icon meipai"/>
    <em v-else-if="includes('抖音')" :style="{ 'marginLeft': marginLeft }" class="platform-icon douyin"/>
    <em v-else-if="includes('小红书')" :style="{ 'marginLeft': marginLeft }" class="platform-icon xiaohongshu"/>
    <em v-else-if="data === '微博'" :style="{ 'marginLeft': marginLeft }" class="platform-icon weibo"/>
    <em v-else-if="['快手', '快手直播', '快手短视频'].includes(data)" :style="{ 'marginLeft': marginLeft }" class="platform-icon kuaishou"/>
    <em v-else-if="data === '淘宝'" :style="{ 'marginLeft': marginLeft }" class="platform-icon taobao"/>
    <em v-else-if="data === '淘宝直播'" :style="{ 'marginLeft': marginLeft }" class="platform-icon taobaozhibo"/>
    <em v-else-if="includes('京东')" :style="{ 'marginLeft': marginLeft }" class="platform-icon jd"/>
    <em v-else-if="includes('今日头条', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon jrtt"/>
    <em v-else-if="includes('实时', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon shishi"/>
    <em v-else-if="includes('门户网站', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon mhwz"/>
    <em v-else-if="includes('微视', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon weishi"/>
    <em v-else-if="includes('火山', false)" :style="{ 'marginLeft': marginLeft }" class="platform-icon hs"/>
    <em v-else-if="includes('QQ音乐', true) || includes('qq音乐', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon qqmusic"/>
    <em v-else-if="includes('站酷', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon zhanku"/>
    <em v-else-if="includes('一直播', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon yizhibo"/>
    <em v-else-if="includes('微博直播', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon weibozhibo"/>
    <em v-else-if="includes('朋友圈', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon pyq"/>
    <em v-else-if="includes('B站', true)" :style="{ 'marginLeft': marginLeft }" class="platform-icon bilibili"/>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
      default: ''
    },
    marginLeft: {
      type: String,
      default: '3px'
    }
  },
  methods: {
    includes(str, equal = false) {
      if (!this.data) return false;
      return equal ? this.data === str : this.data.indexOf(str) >= 0;
    }
  }
};
</script>
<style lang="scss" scoped>

.platform-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right: 5px;
  &.weixin {
    background-image: url(../../assets/platform/weixin.png);
  }
  &.weibo {
    background-image: url(../../assets/platform/weibo.png);
  }
  &.xiaohongshu {
    background-image: url(../../assets/platform/xiaohongshu.png);
  }
  &.miaopai {
    background-image: url(../../assets/platform/miaopai.png);
  }
  &.douyin {
    background-image: url(../../assets/platform/douyin.png);
  }
  &.kuaishou {
    background-image: url(../../assets/platform/kuaishou.png);
  }
  &.meipai {
    background-image: url(../../assets/platform/meipai.png);
  }
  &.taobao {
    background-image: url(../../assets/platform/taobao.png);
  }
  &.taobaozhibo {
    background-image: url(../../assets/platform/taobaozhibo.png);
  }
  &.hs {
    background-image: url(../../assets/platform/hs.png);
  }

  &.jd {
    background-image: url(../../assets/platform/jd.png);
  }
  &.jrtt {
    background-image: url(../../assets/platform/jrtt.png);
  }
  &.mhwz {
    background-image: url(../../assets/platform/mhwz.png);
  }
  &.pyq {
    background-image: url(../../assets/platform/pyq.png);
  }
  &.qqmusic {
    background-image: url(../../assets/platform/qqmusic.png);
  }
  &.shishi {
    background-image: url(../../assets/platform/shishi.png);
  }
  &.weibozhibo {
    background-image: url(../../assets/platform/weibozhibo.png);
  }
  &.weishi {
    background-image: url(../../assets/platform/weishi.png);
  }
  &.yizhibo {
    background-image: url(../../assets/platform/yizhibo.png);
  }
  &.zhanku {
    background-image: url(../../assets/platform/zhanku.png);
  }
  &.bilibili {
    background-image: url(../../assets/platform/bilibili.png);
  }
}
</style>
